<template>
  <div>
    <el-row>
      <el-radio-group v-model="selectedType">
        <el-button
          v-for="(item, index) in types"
          :key="index"
          :type="item.actvie ? 'primary' : ''"
          @click="changeType(item, index)"
          >{{ item.label }}</el-button
        >
      </el-radio-group>
    </el-row>
    <div class="content_border">
      <WorkInfo v-if="selectedType == 0" :fromdata="orderInfo" />
      <ClientInfo :showRepairman="false" v-if="selectedType == 1" :fromdata="orderInfo" />
      <CarInfo v-if="selectedType == 2" :fromdata="orderInfo" />
      <InsuranceOrderDetail v-if="selectedType == 3" :id="id" />
      <SignatureInfo
        v-if="selectedType == 4"
        :workOrderId="workOrderId"
        :workOrderType="workOrderType"
      />
    </div>
  </div>
</template>

<script>
import baseMixin from "@/mixins/base";
import { parseTimeToYMDHMS } from "@/utils";
import CarInfo from "../../view/car-info";
import ClientInfo from "../../view/client-info";
import SignatureInfo from "../../view/signature-info";
import WorkInfo from "./work-info";
import InsuranceOrderDetail from "./insuranceOrderDetail";
import { getDetail } from "@/api/after-sale/workOrderManage/insuranceOrder";
export default {
  name: "viewClientManage",
  components: {
    CarInfo,
    ClientInfo,
    SignatureInfo,
    WorkInfo,
    InsuranceOrderDetail,
  },
  props: {
    //工单id
    id: {
      type: Number | String,
    },
  },
  data() {
    return {
      types: [
        { label: "工单信息", value: 0, actvie: true },
        { label: "客户信息", value: 1, actvie: false },
        { label: "车辆信息", value: 2, actvie: false },
        { label: "保险信息", value: 3, actvie: false },
        { label: "签字记录", value: 4, actvie: false },
      ],
      orderInfo: {}, //工单信息
      selectedType: 0,
    };
  },
  async created() {
    let { success, data } = await getDetail(this.id);
    if (success) {
      this.orderInfo = data;
    }
  },
  methods: {
    changeType(item, index) {
      this.selectedType = index;
      this.types.map((e, i) => {
        if (i == index) {
          e.actvie = true;
        } else {
          e.actvie = false;
        }
      });
    },
  },
  mounted() {},
};
</script>

<style lang="scss" scoped>
.content_border {
  border: 1px solid #dcdfe6;
  padding: 15px;
  margin-top: 20px;
}
</style>
